import React,{Component} from 'react'
import {Content} from './common/layout'
import {Modal,Form,Input,Button} from 'antd'

import {connect} from 'react-redux'

const FormItem=Form.Item;
const createForm=Form.create;

class Index extends Component{
  constructor(props){
    super(props);

    this.state=props.state;

    this.showModal=()=>{
      this.setState({visible:true})
    }

    this.hideModal=()=>{
      this.setState({visible:false})
    }
  }

  render(){
    const formItemLayout={
      labelCol:{span:4},
      wrapperCol:{span:20}
    }

    const {getFieldProps}=this.props.form;
    return(
      <Content>
        <Button type='primary' icon='plus' onClick={this.showModal}>添加信息</Button>
          <Modal title="api信息" visible={this.state.visible} onCancel={this.hideModal}>
            <Form horizontal>
                <FormItem {...formItemLayout} label="Api名称">
                  <Input {...getFieldProps('apiName',{})} />
                </FormItem>
            </Form>
        </Modal>
      </Content>
    )
  }
}

export default connect((state)=>{return {state: state.listReduce}})(createForm()(Index))
